<template>
    <div class="home">
        <div class="main">
            <van-dialog 
                v-model:show="show" 
                title="访问绑定手机号" 
                theme="round-button" 
                :before-close="beforeClose"
                confirmButtonColor="#1989fa"
            >
                <van-form label-width="24vw">
                    <van-field 
                        v-model="formData.phone" 
                        required 
                        center 
                        type="digit" 
                        maxlength="11" 
                        name="phone" 
                        label="联系方式" 
                        placeholder="联系方式"
                    >
                        <template #button>
                            <van-button 
                                size="small" 
                                type="primary" 
                                :disabled="hqyzmDis" 
                                native-type="button" 
                                @click='hqyzm'
                            >
                                {{hqyzmtext}}
                            </van-button>
                        </template>
                    </van-field>
                    <van-field 
                        v-model="formData.code" 
                        required 
                        name="code" 
                        type="digit" 
                        label="验证码" 
                        placeholder="验证码" 
                    />
                </van-form>
            </van-dialog>
            <div class="box">
                <div class="box-header">
                    <div>我的族谱</div>
                </div>
                <div class="box-content">
                    <div 
                        v-for="(item, index) in familyArr" 
                        :key="index" 
                        class="box-content-item" 
                        @click="$router.push(`/familyTree?cm_mainid=${item.c_id}&phone=${formData.phone}`)"
                    >
                        <div class="box-content-item-img">
                            <van-image 
                                width="100%" 
                                height="100%" 
                                fit="cover" 
                                :src="item.cover" 
                            />
                        </div>
                        <div>{{ item.name }}</div>
                    </div>
                    <router-link 
                        v-if="familyArr.length == 0" 
                        class="box-content-item box-content-item-img box-content-item-create" 
                        :to="`/createFamilyTree?type=create&phone=${formData.phone}`"
                    >
                        <div><van-icon name="plus" /></div>
                        <!-- <div>创建我的族谱</div> -->
                    </router-link>
                </div>
            </div>
            <div class="box">
                <div class="box-header">
                    <div>制作指南</div>
                    <!-- <div>全部族谱 (2) ></div> -->
                </div>
                <div class="text-content">
                    <div>1.点击 + 创建族谱</div>
                    <div>2.根据提示完善族谱</div>
                </div>
                <van-button 
                    type="primary" 
                    plain 
                    @click="$router.push('/top')"
                >
                    查看族谱排行榜
                </van-button>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
    import { markRaw, reactive, ref, toRaw, onMounted, onBeforeMount, readonly } from 'vue'
    import type { Ref, Raw } from 'vue'
    import { useRoute } from 'vue-router'
    import { sendSmsApi, getClanByPhoneApi } from '@/apis'
    import { showLoadingToast, closeToast, showSuccessToast, showFailToast, showDialog  } from 'vant'

    const show: Ref<boolean> = ref(false)
    const formData: any = reactive({
        code: localStorage.getItem('jiapu_code'), //验证码,
        phone: localStorage.getItem('jiapu_phone')
    })
    const m: Ref<number> = ref(60)
    const hqyzmDis: Ref<boolean> = ref(false)
    const hqyzmtext: Ref<string> = ref('获取验证码')
    const familyArr: Ref<any[]> = ref([
        // {
        //     name: '奥特曼',
        //     cover: 'https://img01.yzcdn.cn/vant/cat.jpeg'
        // },
        // {
        //     name: '奥特曼',
        //     cover: 'https://img01.yzcdn.cn/vant/cat.jpeg'
        // },
        // {
        //     name: '奥特曼',
        //     cover: 'https://img01.yzcdn.cn/vant/cat.jpeg'
        // },
    ])
    onBeforeMount(() => {
        if (!formData.phone || !formData.code) {
            show.value = true
        } else {
            showLoadingToast({
                message: '加载中...',
                overlay: true,
                forbidClick: true,
                duration: 0
            })
            getClanByPhoneApi({
                company: '连云港人文纪念园智慧陵园管理系统',
                dw: '连云港人文纪念园',
                phone: formData.phone,
                code: formData.code
            }).then(res => {
                closeToast()
                if (res?.data?.length > 0) {
                    if (res.data[0].c_id && res.data[0].c_id != 0) {
                        familyArr.value = res.data
                        localStorage.setItem('jiapu_power', res.data[0].power)
                    } else {
                        localStorage.setItem('jiapu_power', 1)
                    }

                    //有c_id直接缓存权限，没有则需要创建，直接给族长权限：1：族长，可以赋予他人编辑权限，2：管理员，可以编辑自己，3：可以查看

                    localStorage.setItem('jiapu_code', formData.code)
                    localStorage.setItem('jiapu_phone', formData.phone)
                } else if (res?.data?.length == 0) {
                    localStorage.setItem('jiapu_power', 1)
                    localStorage.setItem('jiapu_code', formData.code)
                    localStorage.setItem('jiapu_phone', formData.phone)
                } else {
                    showDialog({
                        title: '提示',
                        message: res[0].msg
                    }).then(() => {
                        show.value = true
                    })
                }
            }).catch(err => {
                closeToast()
                showDialog({
                    title: '提示',
                    message: '网络异常或验证码错误，请稍后重试！',
                }).then(() => {
                    show.value = true
                });
            })
        }
    })
    const hqyzm = () => {
        var myreg = /^[1][3,4,5,7,8,9][0-9]{9}$/;
        if (!myreg.test(formData.phone)) {
            showFailToast('请填写正确的联系方式')
            return false
        }
        // 获取验证码
        sendSmsApi({
            company: '连云港人文纪念园智慧陵园管理系统',
            dw: '连云港人文纪念园',
            phone: formData.phone
        }).then(res => {
            if (res.status == '+OK') {
                showSuccessToast(res.msg)
            } else {
                showFailToast(res[0].msg)
            }
        }).catch(error => {
            showFailToast("验证码发送失败")
            console.log(error)
        })

        // 倒计时
        hqyzmtext.value = m.value + 's'
        hqyzmDis.value = true
        let time = setInterval(() => {
            m.value--
            hqyzmtext.value = m.value + 's'
            if (m.value == 0) {
                hqyzmtext.value = '获取验证码'
                m.value = 60
                hqyzmDis.value = false

                clearInterval(time)
            }
        }, 1000)
    }
    const beforeClose = (action, done) => {
        console.log(action)
        if (!formData.phone || !formData.code) {
            showDialog({
                title: '提示',
                message: '请输入联系方式和验证码！'
            }).then(() => {
                done(false)
            })
        } else {
            getClanByPhoneApi({
                company: '连云港人文纪念园智慧陵园管理系统',
                dw: '连云港人文纪念园',
                phone: formData.phone,
                code: formData.code
            }).then(res => {
                if (res?.data?.length > 0) {
                    if (res.data[0].c_id && res.data[0].c_id != 0) {
                        familyArr.value = res.data
                        localStorage.setItem('jiapu_power', res.data[0].power)
                    } else {
                        localStorage.setItem('jiapu_power', 1)
                    }

                    //有c_id直接缓存权限，没有则需要创建，直接给族长权限：1：族长，可以赋予他人编辑权限，2：管理员，可以编辑自己，3：可以查看

                    localStorage.setItem('jiapu_code', formData.code)
                    localStorage.setItem('jiapu_phone', formData.phone)
                    done()
                } else if (res?.data?.length == 0) {
                    localStorage.setItem('jiapu_power', 1)
                    localStorage.setItem('jiapu_code', formData.code)
                    localStorage.setItem('jiapu_phone', formData.phone)
                    done()
                } else {
                    showDialog({
                        title: '提示',
                        message: res[0].msg
                    }).then(() => {
                        done(false)
                    })
                }
            }).catch(err => {
                showDialog({
                    title: '提示',
                    message: '网络异常或验证码错误，请稍后重试！',
                }).then(() => {
                    done(false)
                });
            })
        }
    }

</script>

<style lang='scss' scoped>
.home {
    width: 100vw;
    height: 100vh;
    // background: url('@/assets/bg/bg4.png');
    // background-size: 100% 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    //backdrop-filter: blur(115px);
}
.home::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    filter: blur(3px);
    background: url('@/assets/bg/bg6.png') no-repeat 100% 100%;
    background-size: cover;
    // opacity: .8;
    z-index: -1;
}
.main {
    flex: 1;
    overflow: scroll;
    box-sizing: border-box;
    //@include padding-global;
    padding: 20px 15px;
}
.box {
    background: rgba(255,255,255,0.8);
    border-radius: 10px;
    padding: 10px;
    margin-bottom: 6px;
    .box-header {
        display: flex;
        justify-content: space-between;
        :first-child {
            font-weight: bold;
            // font-size: 17px;
        }
        :nth-child(2) {
            color: $font-color-2-global;
            font-size: 15px;
        }
    }
    .box-content {
        display: flex;
        flex-wrap: wrap;
        .box-content-item {
            // width: 99px;
            // height: 150px;
            // border: 1px dashed #C7C7C7;
            margin: 10px 0;
            // font-size: 14px;
        }
        .box-content-item-img {
            width: 99px;
            height: 150px;
            border: 1px dashed #C7C7C7;
            // margin: 10px 0;
            font-size: 14px;
        }
        .box-content-item:nth-child(3n-1) {
            margin: 10px;
        }
        .box-content-item-create {
            // width: 99px;
            // height: 150px;
            // border: 1px dashed #C7C7C7;
            // font-size: 14px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
    }
    .text-content {
        text-align: left;
        margin: 10px 0;
        div {
            padding: 0 0 5px 0;
        }
    }
}
</style>
